<template>
    <div class="myview" ref="myview">
        <div v-if="isindiv" v-show="!isShowLoad && timeout">
            <slot></slot>
        </div>
        <slot v-if="!isindiv"></slot>
        <myLoader :style="myStyle" v-show="isShowLoad||!timeout"></myLoader>
        <div v-show="nodate" class="nodata">
            没有信息
        </div>
    </div>
</template>

<script>
    // 自定义视图容器组件
    import myLoader from '../components/myLoader.vue'
    import {
        clearTimeout
    } from 'timers';
    export default {
        name: 'myview',
        components: {
            myLoader
        },
        props: {
            loading: {
                // 加载中效果
                type: Boolean,
                default: false,
            },
            loadtype: {
                // 加载中效果 类型
                type: String,
                default: 'out',
            },
            nodate: {
                // 无数据效果
                type: Boolean,
                default: false,
            },
            isindiv: {
                //是否有内元素div
                type: Boolean,
                default: false,
            }
        },
        data() {
            return {
                myStyle: {},
                name: 'myview',
                timer: null, //定时器
                timeout: true, //加载动画到时
                isShowLoad: false, //是否显示加载效果
            }
        },
        computed: {},
        watch: {
            loading: function(vaule) {
                // 加载效果 父组件配置值
                //console.info('loading值', vaule)
                this.isShowLoad = vaule
                if (!this.timer) {
                    clearTimeout(this.timer)
                }
                if (vaule) {
                    this.timeout = false
                    this.timer = setTimeout(() => {
                        this.timeout = true
                    }, 1000)
                }
            }
            // nodate:function(vaule){
            //     console.info('没数据',vaule)
            // }
        },
        methods: {},
        // computed:{
        //     chartoption:function(){
        //     return this.option
        //     }
        // },
        mounted() {
            //组件挂载后
            let myview = this.$refs.myview
            let top = parseFloat(window.getComputedStyle(myview).paddingTop)
            let bottom = parseFloat(window.getComputedStyle(myview).paddingBottom)
            // let left = window.getComputedStyle(myview).paddingLeft
            // let right = window.getComputedStyle(myview).paddingRight
            let width = myview.offsetWidth
            let height = myview.offsetHeight - top - bottom
            let style = {
                'position': this.loadtype == 'out' ? 'fixed' : 'absolute',
                "margin-top": top + 'px',
                "margin-bottom": bottom + 'px',
                'height': height + 'px'
            }
            this.myStyle = style
        },
        updated() {
            //数据更新后
            if (!this.isShowLoad && this.timeout) {
                this.$emit('finish', true) //事件名finish
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .myview {
        position: relative;
    }
    .mycontent {
        width: 100%;
        min-height: 100%;
    }
    .nodata {
        /* position: absolute;
                                            left: 0;
                                            top: 0; */
        /* transition: all 1s; */
        /* display: none; */
        width: 100%;
        height: 100%;
        z-index: 997;
        padding-top: 1rem;
        text-align: center;
        font-size: 0.65rem;
        color: #666;
        background: #fff;
    }
</style>
